<template>
	<view class="my_course_item">
		<view class="_time">{{appoint.startAt}}</view>
		<view class="u-m-l-48 u-flex-1">
			<view class="u-flex u-flex-between u-flex-items-center">
				<view class="f-s-14 u-flex-1">{{appoint.easyCourse.name}}</view>
				<view class="f-s-12 c-info" v-if="appoint.status== 0">待确认</view>
				<view class="f-s-12 c-warning" v-if="appoint.status== 1">未签到</view>
				<view class="f-s-12 c-success" v-if="appoint.status== 2">已签到</view>
				<view class="f-s-12 c-error" v-if="appoint.status== -1">拒绝</view>
			</view>
			<view class=" u-m-t-16 u-flex u-flex-between u-flex-items-center">
				<view class="f-s-12 u-info">{{appoint.easyUser.nickName}}</view>
				<view v-if="isShow && appoint.status== 1" @click="sign">
					<up-button :customStyle="{width:'50px',height:'20px',fontSize:'10px'}" size="mini" shape="circle"
						iconColor="#fff" text="签到" color="#2080F7"></up-button>
				</view>
				<view v-if="!isShow" @click="goAppoint">
					<up-button :customStyle="{width:'50px',height:'20px',fontSize:'10px'}" size="mini" shape="circle"
						iconColor="#fff" text="查看排期" color="#2080F7"></up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import tag from "@/components/tag.vue"
	import {
		ref
	} from "vue";
	import {
		signIn
	} from '@/api/signIn.js'
	import store from '@/store'
	import {
		uploadFilePromise,
		toast
	} from '@/utils/common.js'
	// const date = ref(uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'))
	// emit
	const emit = defineEmits(['getAppoint_list']);
	const props = defineProps({
		appoint: Object
	})
	const isShow = props.appoint.easyCoach.id=== store.getters.coachId ? true:false
	function sign() {
		uni.chooseImage({
			count: 2,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera', 'album'],
			success: async (res) => {
				const data = await uploadFilePromise(res.tempFilePaths[0])
				const image = JSON.parse(data).url
				signIn({
					appointId: props.appoint.id,
					userId: props.appoint.easyUser.userId,
					courseCardId: props.appoint.easyCourse.id,
					coachId: props.appoint.easyCoach.id,
					date: props.appoint.date,
					startAt: props.appoint.startAt,
					endAt: props.appoint.endAt,
					image: image
				}).then(res => {
					toast('签到成功')
					emit('getAppoint_list')
				})
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	function goAppoint(){
		uni.navigateTo({
			url:'/subPackages/course/course_confirm?courseId=' + props.appoint.easyCourse.id
		})
	}
</script>

<style lang="scss" scoped>
	.my_course_item {
		padding: 16px 24px;
		background-color: #F3F3F5;
		border-radius: 12px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;

		._time {
			font-size: 20px;
			font-weight: bolder;
			border-right: 1rpx solid #C8C8CA;
			padding-right: 24px;
		}
	}
</style>